<template>
  <!-- 登录日志 -->
  <div class="box-shadow">
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="90px"
        >
          <el-form-item :label="$t('IP地址') + ':'" prop="ipaddr">
            <el-input
              v-model="listQuery.ipaddr"
              :placeholder="$t('请输入')"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('用户名') + ':'" prop="userName">
            <el-input
              v-model="listQuery.userName"
              :placeholder="$t('请输入')"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            :label="$t('操作内容') + ':'"
            prop="content"
            label-width="148px"
          >
            <el-input
              v-model="listQuery.content"
              :placeholder="$t('请输入')"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('开始时间') + ':'">
            <el-date-picker
              v-model="listQuery.startTime"
              type="date"
              size="medium"
              :placeholder="$t('选择开始时间')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('结束时间') + ':'">
            <el-date-picker
              v-model="listQuery.endTime"
              type="date"
              size="medium"
              :placeholder="$t('选择结束时间')"
              :picker-options="pickerOptionsEnd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('登录类型') + ':'"
            prop="type"
            label-width="91px"
          >
            <el-checkbox-group v-model="listQuery.type">
              <el-checkbox label="1" name="type">{{ $t("登录") }}</el-checkbox>
              <el-checkbox label="2" name="type">{{ $t("登出") }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- <el-form-item label="登录平台:" prop="type">
            <el-checkbox-group v-model="listQuery.platform">
              <el-checkbox label="1" name="type">电脑端网页版</el-checkbox>
              <el-checkbox label="2" name="type">移动端网页版</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->

          <!-- <el-form-item label="操作状态:" prop="status">
            <el-checkbox-group v-model="listQuery.status">
              <el-checkbox :label="1" name="type">成功</el-checkbox>
              <el-checkbox :label="2" name="type">失败</el-checkbox>
            </el-checkbox-group>

            <el-checkbox-group v-model="listQuery.status">
              <el-checkbox false-label="null" :true-label="0">成功</el-checkbox>
              <el-checkbox false-label="null" :true-label="1">失败</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
        </el-form>
      </div>

      <div class="search-area-btn btns">
        <div @click="handleQuery" class="serch-btn cuver-point">
          {{ $t("搜索") }}
        </div>
        <div @click="resetQuery" class="reset-btn cuver-point">
          {{ $t("重置") }}
        </div>
      </div>
    </div>
    <div class="table">
      <div class="self">
        <div class="search-area-btn btns">
          <div class="serch-btn cuver-point table-top" @click="handleExport">
            {{ $t("导出Excel") }}
          </div>
        </div>
        <el-table
          ref="tables"
          v-loading="loading"
          :data="list"
          @selection-change="handleSelectionChange"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            :label="$t('登录类型')"
            align="center"
            prop="msg"
          ></el-table-column>
          <el-table-column :label="$t('登录平台')" align="center" prop="os" />
          <el-table-column
            :label="$t('操作时间')"
            align="center"
            prop="loginTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.loginTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('IP地址')"
            align="center"
            prop="ipaddr"
            width="130"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="$t('用户名')"
            align="center"
            prop="userName"
            :show-overflow-tooltip="true"
            :sort-orders="['descending', 'ascending']"
          />
          <el-table-column :label="$t('登录状态')" align="center" prop="status">
            <template slot-scope="scope">
              <!-- <dict-tag
                :options="dict.type.sys_common_status"
                :value="scope.row.status"
              /> -->
              <div
                :style="{
                  color: scope.row.status == 0 ? '#73F6AF' : '#FF5562 ',
                }"
              >
                {{ scope.row.status == 0 ? $t("成功") : $t("失败") }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagenation">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- Echarts -->
    </div>
  </div>
</template>

<script>
import { list } from "@/api/monitor/logininfor";

export default {
  name: "Logininfor",
  dicts: ["sys_common_status"],
  data() {
    return {
      // 结束日期
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.listQuery.startTime;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 默认排序
      defaultSort: { prop: "loginTime", order: "descending" },
      // 查询参数
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        ipaddr: undefined,
        userName: undefined,
        content: undefined,
        type: [],
        // status: [],  //操作状态
        // platform: [], // 登录平台
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      list(this.addDateRange(this.listQuery)).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.infoId);
      this.multiple = !selection.length;
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.listQuery.orderByColumn = column.prop;
      this.listQuery.isAsc = column.order;
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "monitor/logininfor/export",
        {
          ...this.listQuery,
        },
        `logininfor_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped lang="scss">
.table {
  width: 100%;
  height: 738px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 15px 24px 24px;
  box-sizing: border-box;
  .btns {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    div:nth-child(2) {
      margin: 0 16px;
    }
  }
  .table-btns {
    display: flex;
    div {
      display: flex;
      width: 46px;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
  .el-table {
    margin-top: 16px;
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}
</style>
